<template>
  <div>
    <el-form :inline="true" ref="formRef">
      <el-form-item>
        <el-tooltip content="用户无权限" effect="dark" v-if="roleName === 'user'">
          <el-button type="primary" @click="editHandle('新增', null)" :disabled="roleName === 'user'">新增</el-button>
        </el-tooltip>
        <el-tooltip v-else>
          <el-button type="primary" @click="editHandle('新增', null)" :disabled="roleName === 'user'">新增</el-button>
        </el-tooltip>
      </el-form-item>
      <el-form-item>
        <el-tooltip content="用户无权限" effect="dark" v-if="roleName === 'user'">
          <el-button type="danger" @click="deleteHandle(null)" :disabled="deleteButtonStatus || roleName === 'user'">批量删除</el-button>
        </el-tooltip>
        <el-tooltip v-else-if="roleName !== 'admin'">
          <el-button type="danger" @click="deleteHandle(null)" :disabled="deleteButtonStatus || roleName === 'user'">批量删除</el-button>
        </el-tooltip>
        <el-button v-else type="danger" @click="deleteHandle(null)" :disabled="deleteButtonStatus || roleName === 'user'">批量删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-input v-model="viewData.search" placeholder="任务标题/描述" clearable @clear="clearSearch"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="initializeData()">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table
        ref="multipleTable"
        :data="viewData.pageData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        stripe
        @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="title" label="任务标题" width="150">
        <template #default="scope">
          <el-tag type="info" effect="plain">{{ scope.row.title }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="任务描述" width="200">
        <template #default="scope">
          <el-popover
              placement="end-start"
              :width="200"
              trigger="hover"
              :content="scope.row.description"
          >
            <template #reference>
              <span class="description">{{ scope.row.description }}</span>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="projectName" label="所属项目" width="150">
        <template #default="scope">
          <span>{{ scope.row.project.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="所属用户" width="150">
        <template #default="scope">
          <span>{{ scope.row.assignee.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 1" type="warning" effect="plain">待办</el-tag>
          <el-tag v-if="scope.row.status === 2" type="primary" effect="plain">进行中</el-tag>
          <el-tag v-if="scope.row.status === 3" type="success" effect="plain">已完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="deadline" label="截止日期" width="180"></el-table-column>
      <el-table-column prop="priority" label="优先级" width="120">
        <template #default="scope">
          <el-tag v-if="scope.row.priority === 1" type="info" effect="plain">低</el-tag>
          <el-tag v-if="scope.row.priority === 2" type="warning" effect="plain">中</el-tag>
          <el-tag v-if="scope.row.priority === 3" type="danger" effect="plain">高</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="260">
        <template #default="scope">
          <el-tooltip content="用户无权限" effect="dark" v-if="roleName === 'user'">
            <el-button type="text" @click="editHandle('编辑', scope.row.id)" :disabled="roleName === 'user'">编辑</el-button>
          </el-tooltip>
          <el-tooltip v-else>
            <el-button type="text" @click="editHandle('编辑', scope.row.id)" :disabled="roleName === 'user'">编辑</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :total="viewData.total"
          :page-size="viewData.page.size"
          @current-change="handleChangeCurrent"
      />
    </div>
  </div>

  <Edit ref="editRef" :showDialog="editDialog" @closeHandle="closeHandle"></Edit>
</template>

<script setup>
import {ref, reactive} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import { GetList, Delete } from '@/api/task.js'
import { useStore } from 'vuex';

const store = useStore();
const roleName = store.getters.roleName;

const viewData = reactive({
  pageData: [],
  page: {
    current: 1,
    size: 10
  },
  total: 0,
  search: ''
})

const initializeData = () => {
  const searchForm = ref({
    current: viewData.page.current,
    content: viewData.search
  })
  GetList(searchForm.value).then((res) => {
    viewData.pageData = res.data.records
    viewData.total = res.data.total;
  })
}
initializeData()

const handleChangeCurrent = (val) => {
  viewData.page.current = val
  initializeData()
}

const deleteHandle = (id) => {
  let ids = [];
  if (id) {
    ids.push(id)
  } else {
    ids.push(...selectedIds)
  }
  ElMessageBox.confirm(
      '确认删除该记录吗?', '警告',
      {confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning',}
  ).then(() => {
    Delete(ids).then(res => {
      ElMessage({message: '操作成功', type: 'success'})
      initializeData()
    })
  })
}

const deleteButtonStatus = ref(true)
let selectedIds = []
const handleSelectionChange = (val) => {
  deleteButtonStatus.value = val.length === 0
  selectedIds = val.map(item => item.id)
}

const clearSearch = () => {
  initializeData()
}

import Edit from './edit.vue'

const editDialog = ref(false)
const editRef = ref(null)
const editHandle = (title, id) => {
  editDialog.value = true
  editRef.value.init(title, id)
}

const closeHandle = (hasChange) => {
  editDialog.value = false
  if (hasChange) {
    initializeData()
  }
  editRef.value.resetForm();
}
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

.description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>